<template>
  <div class="login-page">
    <nav-bar theme="black"></nav-bar>
    <div class="login-main page-main" style="margin-top: 44px">
      <div class="login-title">
        <p>忘记密码</p>
      </div>
      <van-form validate-trigger="onSubmit" :show-error="false" @submit="onSubmit">
        <van-field size="large" v-model="formParams.loginName" placeholder="请输入手机号" :rules="rules.loginName" />
        <van-field
          size="large"
          v-model="formParams.validateCode"
          placeholder="请输入验证码"
          :rules="rules.validateCode"
        >
          <template #button>
            <van-button
              size="small"
              plain
              type="info"
              native-type="button"
              :disabled="formParams.loginName.length !== 11 || sendDisabled"
              @click="send(formParams.loginName)"
            >
              {{ sendText }}
            </van-button>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button block type="info" native-type="submit" size="large">下一步</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { phoneReg } from '@/libs/regexp.js'
import SendCode from '@/mixins/sendCode.js'
export default {
  mixins: [SendCode],
  data() {
    return {
      formParams: {
        loginName: '',
        validateCode: ''
      },
      rules: {
        loginName: [
          { required: true, message: '请输入手机号' },
          { pattern: phoneReg, message: '请输入正确的手机号' }
        ],
        validateCode: [{ required: true, message: '请输入验证码' }]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$router.push({
        name: 'login-password-next',
        params: {
          loginName: this.formParams.loginName,
          validateCode: this.formParams.validateCode
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/login/index.less';
</style>
